---
id: welcome
position: 1
path: Introduction
slug: /
sidebar_label: Introduction
title: React Popup
hide_title: true
description: A Simple React popup component.Use it as a tooltip,modal,sub-menu and match more ...

redirects:
  - 'Home'
---

import Demo from '../examples/Demo.js';
// import Popup from 'reactjs-popup';

# Introduction

[![Build Status][build-badge]][build]
[![npm bundle size][npm-bundle-size]][build]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]

[![MIT License][license-badge]][license]
[![All Contributors](https://img.shields.io/badge/all_contributors-16-orange.svg?style=flat-square)](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]

[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]

`reactjs-popup` is a simple React popup component that help you create simple and complex Modals, Tooltips and Menus for your next React App.

You should consider using `reactjs-popup` for these reasons :

- **✅ Modal, Tooltip, Menu : All in one library 🏋️**
- **✅ Very tiny library (3kb) ⚡️**
- **✅ Fully accessible**
- **✅ Function as children pattern to take control over your popup anywhere in your code 💪**
- **✅ Easy to use 🚀**
- **✅ TypeScript Support 👌**
- **✅ IE Support 🚀**
- **✅ Full style customization 👌 (js, CSS, styled-components)**
- **✅ Support for controlled Modals & Tooltips**
- **✅ Default & Custom Animations**

## Demo

This is a simple demo to demonstrate how you can create Modals, Tooltips, Menus using `reactjs-popup`.

<Demo />

## Sponsor

If you are interested to Sponsor this library and list your logo in this section, [Make sure to contact me](https://twitter.com/ElaziziYoussouf).

## Show Your Support

<a href="https://www.buymeacoffee.com/yjose" target="_blank">
  <img
    src="https://cdn.buymeacoffee.com/buttons/default-orange.png"
    alt="Buy Me A Coffee"
    height="40px"
  />
</a>
<br />

That's all, thank you for your attention, please [![Star on GitHub][github-star-badge]][github-star] the repo to show your support.

we are all made of stars [![Star on GitHub][github-star-badge]][github-star]

## Licensing

The code in this project is licensed under MIT license.

## Maintainers

<table>
  <tbody>
    <tr>
      <td align="center">
        <a href="http://elazizi.com/">
          <img
            width="150"
            height="150"
            src="https://github.com/yjose.png?v=3&s=150"
          />
          <br />
          Youssouf EL Azizi
        </a>
        <div>
          <a href="https://twitter.com/ElaziziYoussouf">
            <img src="https://img.shields.io/twitter/follow/ElaziziYoussouf.svg?style=social&label=Follow" />
          </a>
        </div>
      </td>
    </tr>
  </tbody>
</table>

[build-badge]: https://img.shields.io/travis/yjose/reactjs-popup.svg?style=flat-square
[npm-bundle-size]: https://img.shields.io/bundlephobia/minzip/reactjs-popup?style=flat-square
[build]: https://travis-ci.org/yjose/reactjs-popup
[version-badge]: https://img.shields.io/npm/v/reactjs-popup.svg?style=flat-square
[package]: https://www.npmjs.com/package/reactjs-popup
[downloads-badge]: https://img.shields.io/npm/dt/reactjs-popup.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/reactjs-popup
[license-badge]: https://img.shields.io/npm/l/reactjs-popup.svg?style=flat-square
[license]: https://github.com/yjose/reactjs-popup/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/yjose/reactjs-popup/blob/master/CODE_OF_CONDUCT.md
[github-watch-badge]: https://img.shields.io/github/watchers/yjose/reactjs-popup.svg?style=social
[github-watch]: https://github.com/yjose/reactjs-popup/watchers
[github-star-badge]: https://img.shields.io/github/stars/yjose/reactjs-popup.svg?style=social
[github-star]: https://github.com/yjose/reactjs-popup/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20reactjs-popup%20by%20%40ElaziziYoussouf%20https%3A%2F%2Fgithub.com%2Fyjose%2Freactjs-popup%20%F0%9F%91%8D
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/yjose/reactjs-popup.svg?style=social
[all-contributors]: https://github.com/yjose/all-contributors
